<template>
	<view class="ServiceProvider">
		<navBar><template #title>锦鲤服务商</template></navBar>
		<view class="secureCase">
			<!-- 今日koi转换价格 -->
			<view class="priceCard">
				<view class="title">
					<view class="">
						今日KOI价格
					</view>
					<view class="color">
						查看历史价格 >
					</view>
				</view>
				<view class="convertPrice">
					{{convertPrice}}
				</view>
				<view class="AvailableKOI">
					可用KOI：134.2344
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" :key="item.id">
					<image class="avatar" src="/src/static/logo.png" mode=""></image>
					<view class="content">
						<view class="top">
							<view class="ordersNumber">
								<text class='h3'>诚信经营秒转</text>
								<text class="num">13497单</text>
							</view>
							<view class="intro">
								店铺简介店铺简介店铺简介
							</view>
						</view>
						<view class="bottom">
							<view>总限额: 13435KOI</view>
							<view>剩余数: 132.3244KOI</view>
						</view>
					</view>
					<view class="right">
						<view class="btn" @click="contact">
							兑换
						</view>
						<view class="price">
							1.102<text>USDT</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 兑换KOI -->
			<van-popup v-model:show="showBottom" closeable :round="true" position="bottom" :style="{ height: '70%' }"
				class="contactUsPopup">
				<view class="title">兑换KOI</view>
				<view class="line van-hairline--bottom"></view>
				<view class="content">
					<view class="user">
						<image class="avatar" src="/static/logo.png" mode=""></image>
						<view class="name">诚信经营秒转</view>
						<view class="num">
							<text class="small">1KOI =</text> <text>1.102USDT</text>
						</view>
					</view>
					<view class="use">
						<view class="left">
							使用
						</view>
						<view class="right">
							<text>14149</text> <text>USDT</text>
						</view>
						<view class="posiab">
							余额243243KOI
						</view>
					</view>
					<view class="iconBottom"></view>
					<view class="use noneTop">
						<view class="left">兑换</view>
						<view class="right">
							<text>13456.2134</text> <text>USDT</text>
						</view>
					</view>
					<view class="footer">
						<view class="btn" @click="isConfirm">确认兑换</view>
					</view>
				</view>
			</van-popup>
			<van-popup v-model:show="enterPassword" closeable :round="true" position="bottom" :style="{ height: '70%' }"
				class="contactUsPopup" @click-overlay="overlayPopup" @click-close-icon='overlayPopup'>
				<view class="title">输入密码</view>
				<view class="line van-hairline--bottom"></view>
				<view class="content">
					<view class="keyInputPasswd">
						<van-field v-model="KeyValue" readonly clickable @touchstart.stop="showKeyBoard = true"
							type="password" />
						<text class="fontSize">忘记密码？</text>
					</view>
					<van-number-keyboard class="keyboard" v-model.trim="KeyValue" :show="showKeyBoard"
						@blur="OffKeyBoard" :random-key-order="true" maxlength="8">
						<template v-slot:extra-key>
							<view style="
					    height: 100%;
					    width: 100%;
					    background-color: #4e47ff;
					    text-align: center;
					    line-height: 50px;
					    color: #fff;
					  ">
								<slot name="verifyBtn">
									<view @click="complete">确认</view>
								</slot>
							</view>
						</template>
						<template v-slot:title-left>
							<view style="margin-left: 10px">KOI安全键盘</view>
						</template>
						<template v-slot:delete>
							<view style="margin-left: 10px; color: white"></view>
						</template>
					</van-number-keyboard>
					<view class="footer">
						<view class="btn" @click="isConfirmTwo">确认兑换</view>
					</view>
				</view>
			</van-popup>
			<van-popup v-model:show="InSuccess" closeable :round="true" position="bottom" :style="{ height: '70%' }"
				class="contactUsPopup">
				<view class="content">
					<image class="successPic" src="/static/images/Shop/success.png" mode=""></image>
					<view class="text">
						<view class="head">兑换成功</view>
						<view class="balance">
							<view class="text">
								<view><text class='left'>USDT余额</text> <text class='right'
										style="color: rgba(250, 100, 0, 1);">+ 10086.1343USDT</text>
								</view>
								<view><text class='left'>KOI余额</text> <text class='right'>- 10086.1343KOI</text></view>
							</view>
							<view class="btnContainer">
								<van-button class='btn pain' type="primary" plain>联系客服</van-button>
								<van-button class='btn' type="primary" @click="InIndex">返回首页</van-button>
							</view>
						</view>
					</view>
				</view>
			</van-popup>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import {
		ref
	} from 'vue'
	import {
		debounce
	} from '@/utils/debounce'
	import {
		CionPriceList
	} from '@/api/CionPriceList'
	import navBar from '@/components/mine/navBar/index.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	onLoad(async () => {
		var res = await CionPriceList()
		console.log(res.rows)
	})
	const exchangeKoi = async () => {
		var res = await exchangeKoi({
			amount: "100",
			orderNum: "7e7dd6b0-2d2a-47ba-b86e-d6228944d620",
			payPassword: "123456"
		})
		console.log(res)
	}
	const convertPrice = ref('1KOI = 1.1111USDT')
	const showBottom = ref(false);
	const enterPassword = ref(false);
	// 输入内容
	const KeyValue = ref('')
	// 键盘是否显示
	const showKeyBoard = ref(true)
	// 支付成功弹框
	const InSuccess = ref(false)

	const list = ref([{
		id: 1
	}, {
		id: 2
	}, {
		id: 3
	}, {
		id: 4
	}, {
		id: 5
	}])
	/**
	 * 是否显示联系方式弹出层
	 */
	const contact = debounce(() => {
		showBottom.value = true
	}, 300)

	const isConfirm = debounce(() => {
		showBottom.value = false;

		setTimeout(() => {
			enterPassword.value = true;
		}, 300)
	}, 300)
	/**
	 * 关闭弹出层时清除数据
	 */
	const overlayPopup = () => {
		KeyValue.value = "";
		enterPassword.value = false;
	}

	const OffKeyBoard = () => {
		showKeyBoard.value = false;
	}
	const complete = () => {
		if (KeyValue.value.length >= 6) {
			console.log(KeyValue.value)
			KeyValue.value = ''
			isConfirmTwo()
		}
	}

	function isConfirmTwo() {
		enterPassword.value = false;
		InSuccess.value = true;
	}

	function InIndex() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style lang='scss' scoped>
	.ServiceProvider {
		.priceCard {
			position: relative;
			height: 240px;
			padding: 40px;
			background: linear-gradient(171deg, #00907C 0%, #0800CA 100%);
			border-radius: 16px;
			box-sizing: border-box;
			/* // box-shadow: 0 -10px 50px black; */
			color: white;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40px;
				letter-spacing: 1px;

				.color {
					height: 33px;
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #CB9922;
					line-height: 33px;
				}
			}

			.convertPrice {
				display: flex;
				align-items: center;
				margin-top: 16px;
				font-size: 48px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 70px;
			}

			.AvailableKOI {
				height: 40px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #b4c1e7;
				line-height: 40px;
			}
		}

		.list {
			margin-top: 32px;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 40px 32px;
				height: 243px;
				margin-bottom: 32px;
				background: rgba(255, 255, 255, .2);
				border-radius: 16px;
				box-sizing: border-box;

				.avatar {
					width: 64px;
					height: 64px;
					margin-right: 16px;
					border-radius: 50%;
				}

				.content {
					color: #FFFFFF;
					flex: 1;

					.top {
						.h3 {
							font-size: 28px;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							line-height: 40px;
							letter-spacing: 1px;
						}

						.num {
							margin-left: 8px;
							font-size: 24px;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FA6400;
							line-height: 33px;
						}

						.intro {
							font-size: 24px;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 33px;
						}
					}

					.bottom {
						margin-top: 32px;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 33px;
					}
				}

				.right {
					.btn {
						width: 160px;
						height: 64px;
						margin: 0 auto;
						text-align: center;
						background: #00D0B9;
						border-radius: 8px;
						font-size: 26px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #121317;
						line-height: 64px;
					}

					.price {
						margin-top: 45px;
						font-size: 40px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #00D0B9;
						line-height: 56px;
						letter-spacing: 1px;

						uni-text {
							font-size: 24px;
						}
					}
				}
			}
		}

		.contactUsPopup {
			--van-popup-background: #222324;
			--van-popup-round-radius: 36px;
			--van-popup-close-icon-size: 36px;
			border-radius: 36px 36px 0 0;
			color: white;

			::v-deep.van-icon {
				top: 32px;
				right: 32px;
			}

			.title {
				position: absolute;
				left: 50%;
				top: 32px;
				transform: translateX(-50%);
				font-size: 40px;
				font-family: MicrosoftYaHei;
				color: #FFFFFF;
				line-height: 36px;
			}

			.line {
				top: 96px;
				width: 90%;
				margin: 0 auto;
			}

			.content {
				position: absolute;
				top: 96px;
				padding: 32px;
				width: 100%;
				box-sizing: border-box;

				.user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 144px;
					padding: 0 32px;
					background: #38393a;
					border-radius: 16px;
					box-sizing: border-box;

					.avatar {
						width: 64px;
						height: 64px;
						margin-right: 16px;
						border-radius: 50%;
					}

					.name {
						flex: 1;
						font-size: 28px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40px;
						letter-spacing: 1px;
					}

					.num {
						display: flex;
						align-items: center;
						font-size: 32px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 33px;

						.small {
							font-size: 24px;
						}
					}
				}

				.use {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					width: 80%;
					height: 88px;
					padding: 0 32px;
					margin: 0 auto;
					margin-top: 155px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 16px;
					border: 2px solid rgba(255, 255, 255, 0.6);
					box-sizing: border-box;

					.left {
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 33px;
					}

					.right {
						font-size: 36px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 50px;
						letter-spacing: 1px;
					}

					.posiab {
						position: absolute;
						right: 0;
						bottom: -40px;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #00D0B9;
					}
				}

				.noneTop {
					margin-top: 0;
				}

				.footer {
					display: flex;
					align-items: center;
					justify-content: center;
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 112px;
					background: #121317;
					box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);

					.btn {
						width: 280px;
						height: 80px;
						background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
						border-radius: 16px;
						font-size: 28px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #000000;
						line-height: 80px;
						text-align: center;
					}
				}
			}
		}

		.iconBottom {
			width: 56px;
			height: 56px;
			margin: 32px auto;
			border-radius: 50%;
			background-color: aqua;
		}

		::v-deep .van-number-keyboard__header {
			height: 84px !important;
			font-size: 30px;
		}

		::v-deep.van-key--delete {
			// 	transform: translateX(-496px);
			background: #8c8c8c;
			color: #fff;

			.van-key__delete-icon {
				color: #fff !important;
			}
		}

		::v-deep.van-key__wrapper {
			&:nth-last-child(3) {
				transform: translateX(496px);
			}

			&:nth-last-child(1) {
				transform: translateX(-496px);
			}
		}

		::v-deep.van-key {
			overflow: hidden;
		}

		::v-deep.van-key--active {
			background-color: #8c8c8c;
		}

		::v-deep .van-number-keyboard {
			height: 520px;
			border-radius: 0;
		}

		::v-deep .van-key__wrapper {
			height: 100px;
		}

		::v-deep .van-key {
			height: 90px;
			color: #404040;
		}

		::v-deep .van-cell {
			width: 480px;
			height: 88px;
			border-radius: 10px;
			background: #38393a;
			border: 1px solid gray;
		}

		::v-deep .van-cell__value {
			line-height: 65px;
		}

		::v-deep .van-field__control {
			color: #fff;
		}

		.orderTitle {
			position: relative;
			width: 91%;
			height: 97px;
			color: #fff;
			text-align: center;
			line-height: 97px;
			margin: 0 auto;
			font-size: 32px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);

			&>h4 {
				font-weight: normal;
			}

			.cross {
				position: absolute;
				top: 50%;
				left: 5%;
				transform: translateY(-50%);
			}
		}

		.keyInputPasswd {
			position: relative;
			top: 10%;
			left: 50%;
			width: 480px;
			height: 88px;
			transform: translate(-50%, 0);

			&>text {
				float: right;
				color: red;
				margin-top: 10px;
			}

			.fontSize {
				font-size: 28px;
			}
		}

		.successPic {
			position: relative;
			top: 54px;
			left: 50%;
			width: 201px;
			height: 178px;
			transform: translateX(-50%);
		}

		.head {
			margin: 150px auto 36px;
			text-align: center;
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 56px;
			letter-spacing: 1px;
		}

		.balance {
			width: 100%;

			.text {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				line-height: 56px;

				>view {
					display: flex;
				}

				.left {
					width: 150px;
					text-align: left;
				}

				.right {
					width: 280px;
					text-align: right;
				}
			}

			.btnContainer {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 80px;

				.btn {
					width: 216px;
					height: 72px;
					border-radius: 16px;
					margin: 0 10px;
					font-size: 28px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					line-height: 40px;
					--van-button-primary-background: rgba(0, 208, 185, 1);
					--van-button-primary-color: rgba(34, 35, 36, 1);
				}

				.pain {
					width: 216px;
					height: 72px;
					border-radius: 16px;
					border: 2px solid;
					background-color: transparent;
				}
			}
		}
	}
</style>